<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>个人中心</title>
<link rel="stylesheet" href="static/css/base.css" media="all">
<style type="text/css">
</style>
<script type="text/javascript">
	layui.use([ 'jquery', 'form' ], function() {
		var $ = layui.$;
		var form = layui.form;
		$('.head').on('click', function() {
			$('.head_img').click();
		})

		//头像点击上传功能
		$('.head_img').on('change', function() {
			console.log("123");
			$.ajax({
				url : 'person/uploadHead',
				type : 'POST',
				cache : false,
				data : new FormData($(this).parent()[0]),
				processData : false,
				contentType : false,
				success : function(data) {
					console.log(data);
					if (data.result) {
						$('.head').attr("src", "images/" + data.value);
						$('#head_img').val(data.value);
					}
				}
			});
		})
		
		//点击昵称时触发
		$('.nickname_s').on('click', function (){
			$(this).hide();
			$(this).next().show();
			$(this).next().focus();
		})
		
		//修改昵称回车后触发
		$('.nickname').on('keyup', function (event){
			if (event.keyCode == 13) {
				$(".nickname_s").text($(this).val());
				$(this).hide();
				$(".nickname_s").show();
			}
			return false;
		})
		
		//点击签名时触发
		$('.signature_s').on('click', function (){
			$(this).hide();
			$(this).next().show();
			$(this).next().focus();
		})
		
		//修改签名回车后触发
		$('.signature').on('keyup', function (event){
			if (event.keyCode == 13) {
				$(".signature_s").text($(this).val());
				$(this).hide();
				$(".signature_s").show();
			}
			return false;
		})
		
		//提交修改个人信息表单
		form.on('submit(demo1)', function(data){
			console.log(data.field);
			$.post($('.person_form').attr("action"),data.field, function (data){
				if (data.result==true) {
					layer.msg('操作成功', {icon: 1, time: 2000});				
				}else {
					layer.msg('操作失败：' + data.msg, {icon: 2, time: 2000});
				}
			})
			return false;
		})
		
		//禁止form表单回车提交
		$("form").keypress(function(e) {
			if (e.which == 13) {
				return false;
			}
		});
	})
</script>
</head>
<body>
	<div
		style="height: calc(100% - 40px; ); padding-left: 80px; padding-right: 80px; padding-top: 50px;">
		<!-- 隐藏文件输入框 -->
		<div style="display: none;">
			<form method="post" enctype="multipart/form-data">
				<input type="file" class="head_img" name="file">
			</form>
		</div>
		<form class="layui-form person_form" action="person/updateUserInfo">
			<div
				style="height: 150px; padding: 20px; display: -webkit-box; border: 1px solid #cecece;">
				<div style="height: 150px; width: 150px;">
					<img alt="" src="images/${user.head_img}" width="100%"
						style="cursor: pointer;" class="head">
					<input type="hidden" name="head_img" id="head_img" value="${user.head_img }">	
				</div>

				<div
					style="height: 150px; width: calc(100% - 200px); margin-left: 50px; padding: 10px;">
					<div style="font-size: 20px; font-weight: bold; margin-top: 50px;">
						<span class="nickname_s">${user.nickname }</span>
						<input type="text" name="nickname" class="nickname" style="display: none" value="${user.nickname }">
					</div>
					<div style="margin-top: 15px;">
						<span class="signature_s">${user.signature }</span>
						<input type="text" name="signature" class="signature" style="display: none" value="${user.signature}">
					</div>
				</div>
			</div>
			<div style="padding-top: 50px;">
				<div class="layui-form-item">
					<label class="layui-form-label">住址</label>
					<div class="layui-input-block">
						<input type="text" name="address" autocomplete="off" value="${user.address }"
							lay-verify="required" placeholder="请输入住址" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-block">
						<input type="tel" class="layui-input" name="tel" value="${user.tel }"
							id="create_date" lay-verify="required|phone" placeholder="请输入电话">
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">邮箱</label>
					<div class="layui-input-block">
						<input type="text" class="layui-input" name="email" value="${user.email }"
							id="create_date" lay-verify="email" placeholder="请输入邮箱">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</div>
		</form>
	</div>
</body>
</html>